<template>
  <BasePage>
    <div class="entry-list">
      <div
        v-for="(item, index) in entryOptions"
        :key="index"
        class="entry-item"
        :data-index="index"
        @mouseenter="mountMove"
      >
        <div
          :class="['logo', mount && current == index ? 'mount' : '']"
          :style="{ backgroundImage: `url(${item.img})` }"
        ></div>
        <div class="name">{{ item.name }}</div>
        <div class="desc">{{ item.desc }}</div>
        <div class="entry">进入</div>
      </div>
    </div>
  </BasePage>
</template>
<script setup lang="jsx">
defineOptions({ name: 'BusinessEntryIndex' })
import TestEvaluateLogo from '@/assets/images/TestEvaluateLogo.png'
import TrainLogo from '@/assets/images/TrainLogo.png'
import DataCollectLogo from '@/assets/images/DataCollectLogo.png'
const entryOptions = ref([
  {
    key: 'TestEvaluate',
    value: 'TestEvaluate',
    name: '测评',
    desc: '测评文案小字提示测评文案小字提示',
    img: TestEvaluateLogo,
  },
  {
    key: 'Train',
    value: 'Train',
    name: '训练',
    desc: '训练文案小字提示测评文案小字提示',
    img: TrainLogo,
  },
  {
    key: 'DataCollect',
    value: 'DataCollect',
    name: '数据采集',
    desc: '数据采集文案小字提示测评文案小字提示',
    img: DataCollectLogo,
  },
])
const mount = ref('')
const current = ref(-1)
function mountMove(e) {
  current.value = e.target.dataset.index
  mount.value = 'mount'
}
</script>
<style lang="scss" scoped>
.entry-list {
  display: grid;
  height: 100%;
  place-content: center;
  grid-template-columns: repeat(3, 25%);
  gap: 44px;
  padding: 0 90px;
  --size: 200px;
  .entry-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(178deg, #e8f1fc 0%, rgba(239, 245, 253, 0.3) 100%);
    border-radius: 12px;
    border: 2px solid #ffffff;
    padding: 46px 0;
    transition: all 3s;
    .logo {
      width: var(--size);
      height: var(--size);
      background-size: auto var(--size);
      background-repeat: no-repeat;
      background-position: 0 0;
      position: relative;
      &.mount {
        animation: leave 800ms steps(15) both;
      }
      &::before {
        content: '';
        display: block;
        width: var(--size);
        height: var(--size);
        background: url(@/assets/images/logo-base.png) no-repeat;
        background-size: var(--size);
        background-position-y: 20px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
      }
    }
    .name {
      color: #101112;
      font-size: 24px;
      line-height: 36px;
      font-weight: 500;
      margin-top: 16px;
    }
    .desc {
      color: #4a4d50;
      font-size: 16px;
      line-height: 24px;
    }
    .entry {
      cursor: pointer;
      display: grid;
      place-content: center;
      width: 88px;
      height: 32px;
      border-radius: 6px;
      border: 1px solid #1779f8;
      color: #1779f8;
      font-size: 14px;
      line-height: 20px;
      margin-top: 32px;
    }
    &:hover,
    &.active {
      background: linear-gradient(139deg, #387eff 0%, #4795fa 100%);
      box-shadow: 0px 15px 30px 0px rgba(23, 121, 248, 0.25);
      .logo {
        animation: enter 800ms steps(15) both;
      }
      .name {
        color: #fff;
      }
      .desc {
        color: #fff;
      }
      .entry {
        color: #fff;
        border-color: #fff;
      }
    }
  }
  @keyframes enter {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: calc(var(--size) * -15) 0;
    }
  }
  @keyframes leave {
    0% {
      background-position: calc(var(--size) * -15) 0;
    }
    100% {
      background-position: 0 0;
    }
  }
}
</style>
